{% extends 'index.html' %}
{% load static %}
{% block mycss %}
    <script type="text/javascript" src="{% static 'js/echarts/echarts.js' %}"></script>
    <script type="text/javascript" src="{% static "js/echarts/ecStat.js" %}"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'fishbone/html2canvas.js' %}"></script>
    <script src="{% static 'fishbone/fishBone2.js' %}"></script>
    <link rel="stylesheet" href="{% static 'fishbone/fishBone2.css' %}">
    <link href="{% static 'js/lib/layui/css/layui.css' %}" rel="stylesheet">
    <style>
        {#    修改tab切换页选中的颜色#}
        .nav-tabs.nav > li > a:hover, .nav-tabs.nav > li > a:focus {
            border-bottom: 1px solid #042c70;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            border-bottom: 1px solid #042c70;
        }
    </style>
{% endblock %}
{% block title %}
    <span class="navbar-page-title">军事需求图谱分析 - 知识图谱管理接口</span>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <ul id="myTabs" class="nav nav-tabs" role="tablist">
                            <li class="active"><a href="#entity_node" id="entity_node-tab" role="tab" data-toggle="tab">知识图谱管理接口</a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="entity_node">

                                <div class="table-responsive">

                                    <table id="apis_table" lay-filter="apis_table"></table>
                                </div>


                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block myjs %}
    {#   TODO  新增本地节点#}
    <script type="text/javascript" src="{% static 'js/lib/layui/layui.all.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/xadmin.js' %}"></script>
    <script type="text/html" id="barDemo">
        <a class="my-small-a-btn" lay-event="edit">编辑</a>
        <a class="my-small-a-btn" lay-event="run">运行</a>
        <a class="my-small-a-btn layui-btn-danger" lay-event="delete">删除</a>
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm my-btn" style="background-color: #0A318A;" lay-event="create">创建接口
            </button>
        </div>
    </script>
    <script>
        // 固定左侧菜单栏
        document.getElementById("zstpfwjk").style.display = 'block';
        document.getElementById("zstpjkgl").style.backgroundColor = 'rgba(30,21,21,0.44)';
var table,currPage

        layui.use(['table', 'upload'], function () {
            var checkbox_set = new Set();

            var table = layui.table;
            var upload = layui.upload;

            var currPage = 1;//首先默认值为1，防止出错

            // todo 表格渲染
            table.render({

                parseData: function (res) {
                    for (var i in res.data) {
                        if (checkbox_set.has(res.data[i].id)) {
                            //如果set集合中有的话，给rows添加check属性选中
                            res.data[i]["LAY_CHECKED"] = true;
                        }
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    }
                },
                request: {
                    pageName: 'page' // 页码的参数名称，默认：page
                    , limitName: 'size' //每页数据量的参数名，默认：limit
                },


                elem: '#apis_table',
                url: "{% url 'api_load' %}"
                //,width: 900
                //,height: 274
                , toolbar: '#toolbarDemo'
                , defaultToolbar: []
                , cols: [[ //标题栏
                    {#{type: 'checkbox', width: '5%'},#}
                    {type: 'numbers', title: '序号', width: '5%', align: 'center'}
                    , {field: 'api_name', title: '接口名称', width: '30%', align: 'center'}
                    , {field: 'api_type', title: '接口类型', width: '15%', align: 'center'}
                    , {field: 'created_time', title: '创建时间', width: '30%', align: 'center'}
                    , {title: '操作', toolbar: '#barDemo', width: '20%', align: 'center'}
                ]]
                , id: 'apis_table'
                , skin: 'row' //表格风格
                , even: true
                //,size: 'lg' //尺寸
                , page: true //是否显示分页
                , limits: [8, 20, 50]
                , limit: 8 //每页默认显示的数量
                , done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    /**
                     *如果是直接赋值的方式，
                     *res即为：{data: [], count: 99}
                     *data为当前页数据、count为数据总长度
                     */
                    console.log(res);

                    currPage = curr;//将当前页码赋值给全局变量currPage
                    //得到当前页码
                    console.log(curr);


                    //得到数据总量
                    console.log(count);
                }
                //,loading: false //请求数据时，是否显示loading
            });


            // TODO 编辑与删除
            table.on('tool(apis_table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    xadmin.open('编辑', "{% url 'api_edit' %}?id=" + data.api_id + "&api_name=" + data.api_name + "&api_type=" + data.api_type, 600, 400);
                    setTimeout(function () {
                        console.log(1212121)
                        console.log(xadmin)
                        xadmin.close()
                    }, 1000)
                } else if (obj.event === 'delete') {
                    api_del(obj, data.api_name);


                } else if (obj.event === 'run') {
                    window.location.href = "/" + data.api_url + '?canReturn=100'
                }
            });


            table.on('checkbox(apis_table)',
                function (obj) {
                    var table_checkbox_all = table.cache.apis_table;
                    if (obj.checked == true) {
                        if (obj.type == 'one') {
                            checkbox_set.add(obj.data.id)
                        }
                        if (obj.type == 'all') {
                            for (i = 0; i < table_checkbox_all.length; i++) {
                                checkbox_set.add(table_checkbox_all[i].id);
                            }
                        }
                    } else {
                        if (obj.type == 'one') {
                            checkbox_set.delete(obj.data.id)
                        }
                        if (obj.type == 'all') {
                            for (i = 0; i < table_checkbox_all.length; i++) {
                                checkbox_set.delete(table_checkbox_all[i].id);
                            }
                        }
                    }
                });

            table.on('toolbar(apis_table)',
                function (obj) {
                    if (obj.event === 'create') {
                        xadmin.open('创建接口', '{% url 'api_create' %}', 600, 400)
                    }
                });
        });

        {#TODO 删除方法#}

        function api_del(obj, name) {
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据
                $.getJSON('{% url 'api_del' %}', {
                    name: name
                }, function (data) {
                    if (data.status == 1) {
                        location.reload();


                        {#url: "{% url 'api_load' %}"#}
                        {#layui.use(['table', 'upload'], function () {#}

                            {#var table = layui.table;#}
                            {#table.reload('apis_table', {#}
                            {#    url: "{% url 'api_load' %}"#}
                            {#    , page: {#}
                            {#        curr: currPage,#}
                            {#    }});#}
                        layer.msg('已删除!', {icon: 1, time: 1000});
                    } else {
                        layer.msg('删除失败！', {icon: 1, time: 1000})
                    }

                })

            });
        }

    </script>

{% endblock %}



